<template>
  <div class="case">
    <na-table :datas.sync="tableData" :searchObj.sync="search" @updateDatas="getDataList" @newAdd="newAddClick">
    </na-table>
    <!-- 选择领料单 -->
    <el-dialog v-dialogDrag title="选择半成品领料单" :visible.sync="isPickingVisible" :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog" width="85%">
      <div class="dialogDody">
        <!-- 搜索     -->
        <div class="btnCon flex flex_between" style="border-bottom: none">
          <!--      搜索框-->
          <div class="search">
            <el-input v-model="pickingSearch.likeWords" prefix-icon="el-icon-search" placeholder="输入关键字" size="small"
              @keyup.enter.native="getSelectPicking">
              <!-- <el-button
                slot="append" 
                :loading="purLoading"
                type="primary"
                icon="el-icon-search"
                :disabled="purLoading"
                element-loading-spinner="el-icon-loading"
                @click="getSelectPicking"
              >
                搜索
              </el-button> -->
            </el-input>
          </div>
        </div>
        <!-- 表格区域       -->
        <div class="tableCon not pt0" style="padding: 16px">
          <el-table v-loading="purLoading" :data="pickingList" height="530" :row-class-name="tableRowClassName" border
            style="width: 100%">
            <el-table-column prop="getProductBillNo" label="领料单号" min-width="170" />
            <el-table-column prop="getProductTypeName" label="领料类型" min-width="100" />

            <el-table-column prop="xieYiShuHao" label="订单单号" min-width="150" />
            <el-table-column prop="productName" label="产品名称" min-width="150" show-overflow-tooltip />
            <el-table-column prop="customerBillNo" label="客户单号" show-overflow-tooltip min-width="110" />
            <!-- <el-table-column
              prop="productCode"
              label="产品编码"
              show-overflow-tooltip
              min-width="110"
            /> -->

            <el-table-column prop="createDate" label="创建时间" show-overflow-tooltip min-width="110" />
            <el-table-column prop="getProductPersonName" label="领料人员" min-width="100" />
            <el-table-column prop="equipmentName" label="领料设备" min-width="90" />
            <el-table-column prop="getProductKindCount" label="领料明细" show-overflow-tooltip min-width="120" />
            <el-table-column prop="sumQuantity" label="总数量" show-overflow-tooltip min-width="120" />
            <el-table-column prop="createPersonName" label="创建人员" min-width="90" />
            <el-table-column prop="getProductRemark" label="备注" min-width="150" show-overflow-tooltip>
              <template scope="{row}">
                {{ row.getProductRemark || '--' }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100px" fixed="right" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="medium" style="color: #606266" @click="confirmSelecd(scope.row)">
                  选择
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
    <!--  新建、半成品出库弹框   -->
    <el-dialog title="半成品出库" :visible.sync="isAddDialog" :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog" width="85%" @close="closeDialog">
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"><span class="mr5">出库单号：</span>{{ pickingForm.outStockProductNo || '系统自动生成' }}</span>
          <span class="mr15"><span
              class="mr5">创建日期：</span>{{ pickingForm.createTime || dayjs().format('YYYY-MM-DD') }}</span>
          <span><span class="mr5">创建人员：</span>{{ name }}</span>
        </div>
        <div class="addWuliaoBox">
          <el-form ref="pickingForm" :model="pickingForm" :rules="rules" label-width="95px" label-position="left"
            class="dialogForm dialogInlineForm">
            <el-row>
              <el-col :span="8">
                <el-form-item label="出库类型">
                  <el-input v-model="pickingForm.outStockProductTypeName" placeholder="请输入领料类型" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="关联单据">
                  <el-input v-model="pickingForm.associationProductNo" placeholder="关联单据" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请人员">
                  <el-input v-model="pickingForm.receivePersonName" placeholder="请输入内容" disabled size="mini" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="领料设备">
                  <el-input v-model="pickingForm.equipmentName" placeholder="领料设备" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户单号">
                  <el-input v-model="pickingForm.customerBillNo" placeholder="客户单号" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产品名称">
                  <el-input v-model="pickingForm.productName" placeholder="产品名称" size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="版本版面">
                  <el-input v-model="pickingForm.productVersion" placeholder="版本版面" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生产单号">
                  <el-input v-model="pickingForm.produceTaskBillNo" placeholder="生产单号" size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="领料备注" class="inlineText">
                  <el-input v-model="pickingForm.getProductRemark" type="textarea" :rows="1" placeholder="请输入领料备注"
                    size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="出库备注" class="inlineText mt5">
                  <el-input v-model="pickingForm.outStockBillRemark" type="textarea" :rows="1" placeholder="请输入出库备注"
                    size="mini" clearable />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="tableBox expandBox">
            <div class="tt flex flex_between">
              <span class="fw">领料明细</span>
            </div>
            <el-table :data="pickingForm.detailList" border default-expand-all style="width: 100%">
              <el-table-column type="expand">
                <template slot-scope="{row}">
                  <div class="dialogExpandTable">
                    <el-table :data="row.ggMxList || []" :header-cell-style="{background:'#3f61f110'}">
                      <el-table-column prop="cartonSizeName" label="纸箱规格" min-width="90" />
                      <el-table-column prop="packageDescription" label="包装描述" min-width="90" />
                      <el-table-column prop="eachBoxQuantity" label="每箱数量" min-width="90" />
                      <el-table-column prop="stockBoxCount" label="库存箱数" min-width="90" />
                      <el-table-column prop="stockQuantity" label="库存数量" min-width="100" />
                      <el-table-column prop="outStockBoxs" label="出库箱数" min-width="100">
                        <template slot-scope="{row}">
                          <el-input v-model="row.outStockBoxs" placeholder="出库箱数" size="mini" clearable />
                        </template>
                      </el-table-column>
                      <el-table-column prop="outStockQuantity" label="出库数量" min-width="90">
                        <template slot-scope="{row}">
                          <el-input v-model="row.outStockQuantity" placeholder="出库数量" size="mini" clearable />
                        </template>
                      </el-table-column>
                      <el-table-column label="出库库位" prop="stockArea" min-width="150">
                        <template slot-scope="{row}">
                          <el-cascader v-model="row.stockArea" size="mini" clearable :options="storageLocations"
                            :props="{label: 'name', value: 'code'}" />
                        </template>
                      </el-table-column>
                      <el-table-column prop="outStockRemark" label="备注" show-overflow-tooltip min-width="150">
                        <template slot-scope="{row}">
                          <el-input v-model="row.outStockRemark" placeholder="出库备注" size="mini" clearable />
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="成品编号" prop="productNo" show-overflow-tooltip min-width="110" />
              <el-table-column label="成品类型" prop="productCategory" min-width="90" />
              <el-table-column label="所属客户" prop="customerName" show-overflow-tooltip min-width="110" />
              <el-table-column label="半成品名称" prop="productName" show-overflow-tooltip min-width="110" />
              <el-table-column label="包含工艺" prop="finishedCraftNames" min-width="150" />
              <el-table-column label="库存数量" show-overflow-tooltip min-width="90" prop="stockQuantity" />
              <el-table-column label="领料数量" show-overflow-tooltip min-width="90" prop="applyGetQuantity" />
              <el-table-column label="单位" prop="productUnit" min-width="80" />
              <el-table-column label="备注" show-overflow-tooltip min-width="150" prop="getProductRemark" />
            </el-table>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddDialog=false">取 消</el-button>
        <!-- 拒绝       -->
        <el-button :loading="addLoading" :disabled="addLoading" element-loading-spinner="el-icon-loading" type="warning"
          size="mini" @click="refuseOut">拒绝</el-button>
        <!--  同意      -->
        <el-button :loading="addLoading" :disabled="addLoading" element-loading-spinner="el-icon-loading" type="primary"
          size="mini" @click="saveAdd">同意</el-button>
      </div>
    </el-dialog>
    <!--  查看半成品出库弹框   -->
    <el-dialog title="半成品出库" :visible.sync="isSeevisible" :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog" width="85%" @close="closeDialog">
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"><span class="mr5">出库单号：</span>{{ pickingForm.outStockBillNo || '系统自动生成' }}</span>
          <span class="mr15"><span
              class="mr5">创建日期：</span>{{ pickingForm.createTime || dayjs().format('YYYY-MM-DD') }}</span>
          <span><span class="mr5">创建人员：</span>{{ pickingForm.createPersonName }}</span>
        </div>
        <div class="addWuliaoBox">
          <el-form ref="pickingForm" :model="pickingForm" :rules="rules" label-width="95px" label-position="left"
            class="dialogForm dialogInlineForm">
            <el-row>
              <el-col :span="8">
                <el-form-item label="出库类型">
                  <el-input v-model="pickingForm.outStockTypeName" placeholder="请输入领料类型" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="关联单据">
                  <el-input v-model="pickingForm.associationBillNo" placeholder="关联单据" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请人员">
                  <el-input v-model="pickingForm.getProductPersonName" placeholder="请输入内容" size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="领料设备">
                  <el-input v-model="pickingForm.equipmentName" placeholder="领料设备" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户单号">
                  <el-input v-model="pickingForm.customerBillNo" placeholder="客户单号" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="产品名称">
                  <el-input v-model="pickingForm.productName" placeholder="产品名称" size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="版本版面">
                  <el-input v-model="pickingForm.productVersion" placeholder="版本版面" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="生产单号">
                  <el-input v-model="pickingForm.produceTaskBillNo" placeholder="生产单号" size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="领料备注" class="inlineText">
                  <el-input v-model="pickingForm.getProductRemark" type="textarea" :rows="1" placeholder="请输入领料备注"
                    size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="出库备注" class="inlineText mt5">
                  <el-input v-model="pickingForm.outStockBillRemark" type="textarea" :rows="1" placeholder="请输入出库备注"
                    size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="tableBox lastTdNoBorder expandBox">
            <div class="tt flex flex_between">
              <span class="fw">领料明细</span>
            </div>
            <el-table :data="pickingForm.outStockMxList" border default-expand-all style="width: 100%">
              <el-table-column type="expand">
                <template slot-scope="{row}">
                  <div class="dialogExpandTable">
                    <el-table :data="row.ggCpFhList || []" :header-cell-style="{background:'#3f61f110'}">
                      <el-table-column prop="cartonSizeName" label="纸箱规格" min-width="90" />
                      <el-table-column prop="packageDescription" label="包装描述" min-width="90" />
                      <el-table-column prop="eachBoxQuantity" label="每箱数量" min-width="90" />
                      <el-table-column prop="outStockBoxs" label="出库箱数" min-width="100" />
                      <el-table-column prop="outStockQuantity" label="出库数量" min-width="90" />
                      <el-table-column label="出库库位" prop="areaShelfName" min-width="150">
                        <template slot-scope="{ row }">
                          {{ row.warehouseAreaName+row.areaShelfName }}
                        </template>
                      </el-table-column>
                      <el-table-column prop="outStockRemark" label="备注" show-overflow-tooltip min-width="150" />
                    </el-table>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="成品编号" prop="productNo" show-overflow-tooltip min-width="110" />
              <el-table-column label="成品类型" prop="productType" min-width="90" />
              <el-table-column label="所属客户" prop="customerName" show-overflow-tooltip min-width="110" />
              <el-table-column label="半成品名称" prop="productName" show-overflow-tooltip min-width="110" />
              <el-table-column label="包含工艺" prop="containCrafts" min-width="90" />
              <el-table-column label="领料数量" show-overflow-tooltip min-width="90" prop="getMaterialQuantity" />
              <el-table-column label="出库箱数" show-overflow-tooltip min-width="90" prop="outStockSumBoxCount" />
              <el-table-column label="出库数量" show-overflow-tooltip min-width="90" prop="outStockSumQuantity" />
              <el-table-column label="单位" prop="productUnit" min-width="80" />
              <el-table-column label="备注" show-overflow-tooltip min-width="150" prop="getMaterialRemark" />
            </el-table>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isSeevisible=false">取 消</el-button>
        <!-- 确定       -->
        <el-button type="primary" size="mini" @click="isSeevisible=false">确定</el-button>
      </div>
    </el-dialog>
    <!--    拒绝原因弹框-->
    <el-dialog title="拒绝原因" :visible.sync="reasonVisible" :close-on-click-modal="false" custom-class="comDialog"
      append-to-body width="30%" @close="closeCancelDialog">
      <div class="dialogDody">
        <el-form ref="cancelForm" :model="cancelForm" :rules="cancelRules" label-width="0px" class="dialogForm">
          <el-form-item label="" prop="stockStateDesc">
            <el-input v-model="cancelForm.stockStateDesc" type="textarea" :autosize="{ minRows: 2}" placeholder="请输入内容"
              size="mini" clearable />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="reasonVisible=false">取 消</el-button>
        <el-button v-loading="addLableLoading" :disabled="addLableLoading" element-loading-spinner="el-icon-loading"
          type="primary" size="mini" @click="refuseInstock">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import MixA from '@/utils/mixin'
  import {
    arraySort
  } from '@/utils'
  import naTable from "@/components/naTable";
  const mixa = new MixA()
  import {
    mapGetters
  } from 'vuex'
  export default {
    name: '',
    components: {
      naTable
    },
    mixins: [mixa],
    computed: {
      ...mapGetters([
        'name',
        'userInfo'
      ])
    },
    data() {
      return {
        addLableLoading: false,
        reasonVisible: false, // 拒绝原因弹框显示隐藏
        addLoading: false, // 半成品同意或者拒绝加载
        isSeevisible: false, // 查看半成品领料出库弹框隐藏显示
        isSelect: false, // 选择半成品领料获取库存信息
        isAddDialog: false, // 半成品出库审核弹框显示隐藏
        isPickingVisible: false, // 半成品领料单弹框显示隐藏
        searchLoading: false, // 半成品列表加载
        radioSelect: null, // 半成品单选中单号
        currentRow: {}, // 半成品单选中行
        pickingList: [], // 半成品领料列表
        pickingSearch: {
          likeWords: '',
          outStockState: 0
        },
        purLoading: false, // 半成品领料表格加载
        search: {
          QueryDataBaseFiled: '',
          pageIndex: 1,
          pageSize: 30,
          likeWords: '',
        }, // 搜索条件
        pickingForm: {
          outStockProductTypeName: '半成品出库',
          associationProductNo: '', // 关联单据号
          equipmentNo: '', // 领料设备
          equipmentName: '', // 领料设备名称
          getProductRemark: '', // 领料备注
          receivePerson: '', // 申请人员代码
          receivePersonName: '', // 申请人员名称
          outStockBillRemark: '', // 出库备注说明
          detailList: []
        }, // 半成品出库表单
        dataLists: [], // 半成品出库列表
        total: 0,
        storageLocations: [], // 库位列表
        tableHeight: null,
        tableHead: [], // 表头
        cancelForm: {
          stockStateDesc: ''
        },
        rules: {

        },
        cancelRules: {
          stockStateDesc: [{
            required: true,
            message: '请填写拒绝原因',
            trigger: 'change'
          }]
        },

        tableData: {
          headId: 'head', //表头列显隐组件所需ID-避免多个页面id重复问题
          tableId: 'outStockID', //表格列表key,也就是一条数据的唯一标识
          senior: false, //高级搜索是否显示
          disableWord: '', //是否禁用显示的字段
          disableStatus: '', //判断未禁用的状态值
          // addTitle: '', //新建按钮名称-为''则不显示，为undefine则为新建
          addPermission: 'MenuCode5-3-3-1', //新建按钮权限
          addIcon: '', //新建按钮icon
          voidWord: '', //需要查询作废的字段
          statusList: [], //状态筛选条件列表
          statusWord: '', //状态筛选的字段
          refresh: true, //刷新按钮
          //表格按钮
          operationBtn: [{
            title: '查看', //按钮名称
            methodsName: 'seeInfo', //按钮绑定方法的字段
          }],
          //表格内容
          tbody: [],
          //表格表头
          thead: [],
        },
      }
    },
    created() {
      // 半成品出库表头
      this.getTableHead()
      // 得到半成品领料列表
      this.getSelectPicking()
      // 库区库位
      this.getStorageLocations()
    },
    mounted() {},
    methods: {
      // 拒绝半成品出库
      refuseInstock() {
        this.$refs.cancelForm.validate((valid) => {
          if (valid) {
            this.addLableLoading = true
            const params = {
              getProductBillNo: this.pickingForm.associationProductNo,
              refuseReason: this.cancelForm.stockStateDesc
            }
            this.$api.warehouse.RefuseGetSemiFinishedProductBill(params).then(() => {
              this.$message({
                message: '已拒绝',
                type: 'success'
              })
              this.getDataList()
              this.isAddDialog = false
              this.reasonVisible = false
            }).catch(() => {
              this.addLableLoading = false
            })
          }
        })
      },
      // 拒绝半成品出库点击事件
      refuseOut() {
        this.reasonVisible = true
      },
      // 同意半成品出库
      saveAdd() {
        this.addLoading = true
        let arr = []
        console.log(this.pickingForm)
        this.pickingForm.detailList.forEach((i) => {
          i.ggMxList.forEach((j) => {
            arr.push({
              productNo: j.productNo,
              productStockNo: j.productStockNo,
              outStockBoxs: j.outStockBoxs,
              outStockQuantity: j.outStockQuantity,
              warehouseAreaCode: j.stockArea[0],
              areaShelfCode: j.stockArea[1],
              outStockRemark: j.outStockRemark
            })
          })
        })
        this.pickingForm.associationBillNo = this.pickingForm.associationProductNo
        this.pickingForm.outStockMxList = arr
        const params = this.pickingForm
        this.$api.warehouse.AddOutStockProduct(params).then(() => {
          // 半成品出库列表
          this.getDataList()
          this.$message({
            message: '出库成功',
            type: 'success'
          })
          this.isAddDialog = false
          this.addLoading = false
        }).catch(() => {
          this.addLoading = false
        })
      },
      // 查看领料出库
      seeInfo(data) {
        this.isSeevisible = true
        this.getInfo(data.outStockID)
      },
      // 半成品领料单确认
      async confirmSelecd(row) {
        this.isSelect = true
        const arr = JSON.parse(JSON.stringify(row.mxDataList))
        this.pickingForm = row
        this.pickingForm.detailList = arr
        this.pickingForm.detailList.forEach((i) => {
          i.ggMxList.forEach((j) => {
            j.warehouseAreaCode = ''
            j.areaShelfCode = ''
            j.stockArea = ''
          })
        })
        this.pickingForm.associationProductNo = row.getProductBillNo
        this.pickingForm.receivePerson = row.getProductPerson
        this.pickingForm.receivePersonName = row.getProductPersonName
        this.pickingForm.equipmentNo = row.equipmentNo
        this.pickingForm.equipmentName = row.equipmentName
        this.pickingForm.customerBillNo = row.customerBillNo
        this.pickingForm.productName = row.productName
        this.pickingForm.produceTaskBillNo = row.produceTaskBillNo
        this.pickingForm.productVersion = row.productVersion
        this.isPickingVisible = false
        this.isAddDialog = true
      },
      // 新建点击事件
      newAddClick() {
        this.isPickingVisible = true
      },
      // 库区库位
      getStorageLocations() {
        const parmas = {
          warehouseCode: ''
        }
        this.$api.warehouse.GetStockQueryAreaTreeView(parmas).then(res => {
          this.storageLocations = res
        })
      },
      // 得到半成品领料列表
      getSelectPicking() {
        const params = this.pickingSearch
        this.purLoading = true
        this.$api.warehouse.GetMatchGetSemiFinishedProductBills(params).then(res => {
          this.pickingList = res
          this.purLoading = false
        }).catch(() => {
          this.purLoading = false
        })
      },
      // 给选中一行添加class
      tableRowClassName({
        row
      }) {
        if (this.currentRow.getProductBillNo === row.getProductBillNo) {
          return 'selectd'
        }
      },
      // 半成品单详情
      getInfo(id) {
        const params = {
          queryBy: 1,
          queryValue: id
        }
        this.infoLoading = true
        this.$api.warehouse.GetSingleOutStockProduct(params).then(res => {
          this.pickingForm = res
          console.log(this.pickingForm)
          this.infoLoading = false
        }).catch(() => {
          this.infoLoading = false
        })
      },
      // 半成品出库表头
      getTableHead() {
        const parmas = {
          tableCode: this.$config.SemiProductOutStockList
        }
        this.$api.common.getAllTableHead(parmas).then(res => {
          res.sort(arraySort('columnSort'))
          this.tableData.thead = res;
          // 半成品出库列表
          this.getDataList()
        })
      },
      getDataList() {
        const params = this.search
        this.searchLoading = true
        this.$api.warehouse.GetPageSemiProductOutStockBills(params).then(res => {
          this.tableData.tbody = res.list;
          this.search.total = res.totalCount;
          this.searchLoading = false
        }).catch(() => {
          this.searchLoading = false
        })
      },
      closeDialog() {
        if (this.$refs.pickingForm) {
          this.$refs.pickingForm.resetFields()
        }
        this.pickingForm = this.$options.data().pickingForm
      },
      closeCancelDialog() {
        if (this.$refs.cancelForm) {
          this.$refs.cancelForm.resetFields()
        }
        this.cancelForm = this.$options.data().cancelForm
      }
    }
  }

</script>
<style lang="scss" scoped>
  .spot {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 100%;
  }

  .subTip {
    border-bottom: 1px #e6e6e6 solid;
    background: #f5f6f9;
    padding: 8px 16px;
  }

  .addWuliaoBox {
    padding: 10px 16px;

    .tableBox {
      margin-top: 16px;
      border: 1px solid #e6e6e6;
      border-bottom: none;
      border-radius: 8px 8px 0 0;
      overflow: hidden;

      .tt {
        height: 38px;
        line-height: 38px;
        padding-left: 16px;
        background: #f7f8fa;
        border-radius: 8px 8px 0 0;
      }
    }
  }

</style>
